<template>
  <section class="login">
    <div class="box">
      <div class="title">管理员登录</div>
      <div class="form">
        <!-- form表单 -->
        <div class="zhanghao">
          <span>账号登录</span>
        </div>
        <el-form
          ref="loginFormRef"
          :rules="loginFormRules"
          :model="loginForm"
          class="login-form"
        >
          <!-- 用户名 -->
          <el-form-item prop="username">
            <el-input
              @keyup.enter.native="login"
              v-model="loginForm.username"
              prefix-icon="el-icon-user-solid"
              placeholder="请输入用户名"
            ></el-input>
          </el-form-item>
          <!-- 密码 -->
          <el-form-item prop="password">
            <el-input
              @keyup.enter.native="login"
              v-model="loginForm.password"
              prefix-icon="el-icon-s-cooperation"
              show-password
              placeholder="请输入密码"
            ></el-input>
          </el-form-item>
          <!-- 按钮 -->
          <el-form-item class="btns">
            <el-button class="sin" type="primary" @click="login"
              >登录</el-button
            >
            <el-button type="info" @click="resetLoginForm">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="img">
        <img src="../assets/img/login_compute.png" alt="" />
      </div>
    </div>
  </section>
</template>
<script>
import { $http } from "../request/service";
export default {
  name: "",
  data() {
    return {
      loginForm: {
        username: "superadmin",
        password: "admin123456",
      },
      // 表单验证
      loginFormRules: {
        username: [
          {
            required: true,
            message: "请输入用户名称",
            trigger: "blur",
          },
          {
            min: 3,
            max: 10,
            message: "长度在3到10字符之间",
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur",
          },
          {
            min: 5,
            max: 15,
            message: "长度在5到15字符之间",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    // 重置表单
    resetLoginForm() {
      this.$refs.loginFormRef.resetFields();
    },
    // 登录验证功能
    login() {
      this.$refs.loginFormRef.validate(async (valid) => {
        if (!valid) return;
        // 请求接口
        $http.post("/adminSignIn", this.loginForm).then((res) => {
          console.log(res);
          if (res.data.msg !== "登录成功")
            return this.$message.error(res.data.msg);
          window.sessionStorage.setItem("token", res.data.token);
          window.sessionStorage.setItem(
            "userinfo",
            JSON.stringify(res.data.userinfo)
          );
          this.$message.success(res.data.msg);
          this.$router.push(
            `/home/?name=${res.data.userinfo.username}&id=${res.data.userinfo.id}`
          );
        });
      });
    },
  },
};
</script>
<style scoped>
.sin {
  background-color: #fc5d5d;
  border: 1px solid #fc5d5d;
}
.login {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.login > div {
  position: relative;
  background-color: #fff;

  padding: 100px 20px 20px 20px;
  width: 700px;
  border-radius: 60px;
  box-shadow: 25px 25px 30px 0px rgb(223, 223, 223);
}
.img img {
  background-color: #fff;

  width: 194px;
  height: 188px;
}
.box {
  display: flex;
  justify-content: center;
  align-items: center;
}
.form,
.img {
  flex: 1;
}
.box .img {
  margin-left: 30px;
}
.zhanghao {
  border-bottom: 2px solid #fc5d5d;
  margin-bottom: 20px;
  padding: 10px;
  text-align: start;
  font-size: 14px;
  font-weight: 700;
}
.title {
  position: absolute;
  top: 40px;
  left: 50%;
  transform: translate(-50%);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.1em;
}
</style>
